<!DOCTYPE html>
<html>
<head>
<title>注册/登录</title>

	<meta content="width=device-width, initial-scale=1" name="viewport" />
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

	<script src="../include/js/jquery3.4.1.js" type="text/javascript"></script>

	<link href="../include/bootstrap-3.3.7-dist/css/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
	<link href="../include/css/register.css" media="all" rel="stylesheet" type="text/css" />

</head>
<body>

<div class="main">
	<div class="w3_login" style="margin-top: 100px">
		<div class="w3_login_module">
			<div class="module form-module">
				<div class="toggle">
					<i class="glyphicon glyphicon-pencil"></i>
					<div class="tooltip">点击切换</div>
				</div>
				<div class="form">
					<h2>登录账号</h2>
					<form action="/login/" method="post">
						<input name="username" placeholder="用户名" required=" " type="text" />
						<input name="password" placeholder="密码" required=" " type="password" />
						<input type="submit" value="登录" />
					</form>
				</div>
				<div class="form">
					<h2>创建一个账号</h2>
					<form action="/register/" method="post">
						<input name="username" placeholder="用户名" required=" " type="text" />
						<input name="password" placeholder="密码" required=" " type="password" />
						<input type="submit" value="注册" />
					</form>
				</div>
				<!--<div class="cta"><a href="#">忘记密码?</a></div>-->
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
$('.toggle').click(function(){
	$(this).children('i').toggleClass('fa-pencil');
	$('.form').animate({height: "toggle",'padding-top': 'toggle','padding-bottom': 'toggle',opacity: "toggle"}, "slow");
});
</script>

</body>
</html>